import React, { useEffect, useState } from 'react'
import { Card, Form, Input, Button, Select, Space, Table } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import type { ColumnsType } from 'antd/es/table'

import {
  reqGetCityOrDistrictList,
  reqGetHospitalList,
  reqGetProvinceList,
} from '@api/hospital/hospitalList/index'
import {
  IhospitalList,
  IhospitalListItem,
  IprovinceList,
} from '@api/hospital/hospitalList/model/hospitalListTypes'

// 解构Option组件
const { Option } = Select

const columns: ColumnsType<IhospitalListItem> = [
  {
    title: '序号',
    render: (text, record, index) => index + 1,
    align: 'center',
  },
  {
    title: '医院logo',
    dataIndex: 'logoData',
    render(text) {
      return <img src={`data:image/jpeg;base64,` + text} alt="" width={80} />
    },
    align: 'center',
  },
  {
    title: '医院名称',
    dataIndex: 'hosname',
  },
  {
    title: '等级',
    render(data) {
      return data.param.hostypeString
    },
  },
  {
    title: '详细地址',
    render(data) {
      return data.param.fullAddress
    },
  },
  {
    title: '状态',
    dataIndex: 'status',
    render(status) {
      return status ? '已上线' : '未上线'
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
  },
  {
    title: '操作',
    render: (_, record) => (
      <Space>
        <Button type="primary">查看</Button>
        <Button type="primary">排班</Button>
        <Button type="primary">{_.status ? '下线' : '上线'}</Button>
      </Space>
    ),
    width: 120,
  },
]

export default function HospitalList() {
  const [form] = Form.useForm()
  // 医院列表数据
  const [hospitalList, setHospitalList] = useState<IhospitalList>([])

  // 分页的状态
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(5)
  const [total, setTotal] = useState(0)

  // 表格加载效果
  const [loading, setLoading] = useState(false)

  // 省市区三级数据的状态
  const [province, setProvince] = useState<IprovinceList>([])
  const [city, setCity] = useState<IprovinceList>([])
  const [district, setDistrict] = useState<IprovinceList>([])

  useEffect(() => {
    getHospitalList(page, pageSize)
    // 组件挂载获取省数据
    getProvince()
  }, [])

  // 获取医院列表
  async function getHospitalList(page: number, pageSize: number) {
    setLoading(true)
    const result = await reqGetHospitalList({ page, pageSize })
    setHospitalList(result.content)
    setTotal(result.totalElements)
    setLoading(false)
  }

  // 获取省数据
  async function getProvince() {
    const province = await reqGetProvinceList()
    setProvince(province)
  }

  // 获取市数据
  async function getCity(id: string) {
    const result = await reqGetCityOrDistrictList(id)

    // console.log(result)
    setCity(result)
  }
  // 获取区数据
  async function getDistrict(id: string) {
    const result = await reqGetCityOrDistrictList(id)

    // console.log(result)
    setDistrict(result)
  }

  const onFinish = (values: any) => {
    console.log('Success:', values)
  }
  return (
    <Card>
      <Form name="basic" onFinish={onFinish} layout="inline" form={form}>
        <Form.Item name="provinceCode" style={{ width: 200 }}>
          <Select
            placeholder="请选择省"
            onChange={(value) => {
              // console.log(value)
              // 清除市和区选中的数据
              form.setFieldsValue({ cityCode: null, districtCode: null })
              getCity(value)
            }}
          >
            {province.map((item) => {
              return (
                <Option key={item.id} value={item.value}>
                  {item.name}
                </Option>
              )
            })}
          </Select>
        </Form.Item>
        <Form.Item name="cityCode" style={{ width: 200 }}>
          <Select
            placeholder="请选择市"
            onChange={(value) => {
              //清除区的数据
              form.setFieldsValue({ districtCode: null })
              getDistrict(value)
            }}
          >
            {city.map((item) => {
              return (
                <Option key={item.id} value={item.value}>
                  {item.name}
                </Option>
              )
            })}
          </Select>
        </Form.Item>
        <Form.Item name="districtCode" style={{ width: 200 }}>
          <Select placeholder="请选择区">
            {district.map((item) => {
              return (
                <Option key={item.id} value={item.value}>
                  {item.name}
                </Option>
              )
            })}
          </Select>
        </Form.Item>
        <Form.Item name="hosname">
          <Input placeholder="医院名称"></Input>
        </Form.Item>
        <Form.Item name="hoscode">
          <Input placeholder="医院编码"></Input>
        </Form.Item>
        <Form.Item name="hostype" style={{ width: 200, marginTop: 20 }}>
          <Select placeholder="医院类型">
            <Option value="xxx">一级甲等</Option>
          </Select>
        </Form.Item>
        <Form.Item name="status" style={{ width: 200, marginTop: 20 }}>
          <Select placeholder="医院状态">
            <Option value={1}>已上线</Option>
            <Option value={0}>未上线</Option>
          </Select>
        </Form.Item>

        <Form.Item style={{ marginTop: 20 }}>
          <Space>
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              查询
            </Button>
            <Button>清空</Button>
          </Space>
        </Form.Item>
      </Form>
      <Table
        loading={loading}
        columns={columns}
        dataSource={hospitalList}
        style={{ marginTop: 20 }}
        bordered
        rowKey={'id'}
        pagination={{
          total,
          current: page,
          pageSize,
          showTotal(total) {
            return `总共${total}条`
          },
          showSizeChanger: true,
          pageSizeOptions: [5, 10, 15],
          showQuickJumper: true,
          onChange(page, pageSize) {
            setPage(page)
            setPageSize(pageSize)
            getHospitalList(page, pageSize)
          },
        }}
      />
    </Card>
  )
}
